<template>
  <div class="page-wrap">
    <div class="search-form">
      <el-form inline @submit.prevent>
        <el-form-item :label="$t('msg.sample.sampleCode')" prop="sampleCode">
          <el-input v-model="queryForm.sampleCode" v-trim class="form-width"></el-input>
        </el-form-item>
        <el-form-item :label="$t('msg.sample.name')" prop="sampleName">
          <el-input v-model="queryForm.sampleName" v-trim class="form-width"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <search-params-dialog
      v-model:visible="searchDialogVisible"
      @reset="handleReset"
      @search="handleSearch">
      <el-form
        ref="searchFormRef"
        class="params-search-form"
        :model="queryForm"
        label-width="80px"
        label-suffix=":"
        size="small"
        label-position="top"
        inline>
        <el-form-item :label="$t('msg.sample.sampleCode')" prop="sampleCode">
          <el-input v-model="queryForm.sampleCode" v-trim class="form-width"></el-input>
        </el-form-item>
        <el-form-item :label="$t('msg.sample.name')" prop="sampleName">
          <el-input v-model="queryForm.sampleName" v-trim class="form-width"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="queryForm.startTime"
            class="form-long-width"
            type="datetimerange"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </search-params-dialog>

    <div class="operate-btns-group">
      <el-button v-permission="['003001']" type="primary" @click="handleEdit(null)">新增</el-button>
      <el-button type="primary" @click="handleSearch">{{$t('msg.common.buttons.search')}}</el-button>
      <el-button @click="handleReset">{{$t('msg.common.buttons.reset')}}</el-button>
      <el-badge :value="searchParamsKeyNum" :hidden="searchParamsKeyNum === 0" class="item" type="primary">
        <el-button type="primary" @click="searchDialogVisible = true">更多查询</el-button>
      </el-badge>
    </div>
    <el-table
      ref="tableRef"
      :data="tableData"
      border
      class="table"
      :height="tableHeight"
      style="width: 100%">
      <el-table-column prop="sampleCode" :label="$t('msg.sample.sampleCode')" min-width="180" />
      <el-table-column prop="patientName" :label="$t('msg.sample.name')" min-width="180" />
      <el-table-column prop="projectName" :label="$t('msg.sample.projectName')" min-width="180" />
      <el-table-column :label="$t('msg.sample.operate')" min-width="180">
        <template #default="{row}">
          <el-button v-permission="'003001'" text @click="handleEdit(row)">{{$t('msg.common.buttons.edit')}}</el-button>
          <el-button v-permission="'003'" text class="color-danger" @click="handleDel(row)">{{$t('msg.common.buttons.del')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper, slot"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
      <button text @click="handleRefresh">
        <el-icon :size="20">
          <Refresh />
        </el-icon>
      </button>
    </el-pagination>

    <edit-sample-dialog
      v-model:visible="editSampleDialogData.visible"
      :pdata="editSampleDialogData.data"
      @dialog-confirm-event="handleSearch"/>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { awaitWrap, computeObjectValidKeyNum } from '@/utils'
import { SUCCESS_CODE } from '@/constants'
import { getSampleList } from '@/api/sample-management'
import { useTableCommonData } from '@/composables/table-common'
import EditSampleDialog from './EditSampleDialog.vue'
import SearchParamsDialog from '@/components/SearchParamsDialog'

// ---------------------国际化-------------------
const i18n = useI18n()

// 生命周期函数
onMounted(() => {
  handleSearch()
})

// 组件实例
const tableRef = ref()
const searchFormRef = ref()

// ---------------------------获取表格数据---------------------
// 表格查询项的初始数据
const query = {
  sampleName: '', // 样本名称
  sampleCode: '', // 样本编号
  startTime: ''
}
// 设置提交参数
const setParams = () => {
  return {
    fname: queryFormSubmit.value.sampleName,
    fcode: queryFormSubmit.value.sampleCode
  }
}
// 获取表格参数
const getTableData = async () => {
  const params = {
    ...setParams(),
    currentPage: currentPage.value,
    pageSize: pageSize.value
  }
  const { res } = await awaitWrap(getSampleList(params, { loadingDom: '.table' }))
  if (res?.statusCode === SUCCESS_CODE) {
    const rows = res.data?.rows || []
    total.value = res.data?.total || 0
    tableData.value = []
    rows.forEach(v => {
      const item = {
        fid: v.fid,
        sampleCode: v.fsample_code, // 样本编号
        patientName: v.fpatient_name, // 患者姓名
        projectName: v.fproject_name // 项目名
      }
      tableData.value.push(item)
    })
  }
}

// 表格基础数据
const {
  tableData,
  currentPage,
  pageSize,
  pageSizes,
  total,
  queryForm,
  queryFormSubmit,
  tableHeight,
  handleSearch,
  handleReset,
  handleSizeChange,
  handleCurrentChange,
  handleRefresh
} = useTableCommonData({ query, getTableDataFn: getTableData })

// ---------------------更多查询弹窗-------------------
const searchDialogVisible = ref(false)
const searchParamsKeyNum = computed(() => {
  return computeObjectValidKeyNum(queryForm.value, [])
})

// ---------------------按钮交互操作相关内容-------------------
// 编辑样本弹窗数据
const editSampleDialogData = reactive({
  data: null,
  visible: false
})
// 编辑
const handleEdit = row => {
  editSampleDialogData.data = row ? { ...row } : null
  editSampleDialogData.visible = true
}
// 删除
const handleDel = row => {}

// 表格基础方法

</script>

<style scoped lang="scss">
.form-width{
  width: 200px;
}
</style>
